<template>
    <div v-if="show === 1" class="container">
        <!-- 头部导航 -->
        <navbar></navbar>
        <!-- 中间内容 -->
        <div class="loginTypesWrap">
            <div class="main_container">
                <div class="bigLogon"><img src="@/assets/person/biglogo.png" alt=""></div>
                <div class="btn">
                    <van-button class="btn_phone" @click="toLogin">
                        <i class="iconfont icon-shouji"></i>
                        手机号快捷登录
                    </van-button>
                    <van-button class="email_phone" @click="toRegister">
                        <i class="iconfont icon-youxiang"></i>
                        点击去注册
                    </van-button>
                </div>
            </div>
            <div class="thirdWrap">
                <div class="itemWrap"><span>微信</span></div>
                <div class="itemWrap"><span>QQ</span></div>
                <div class="itemWrap"><span>微博</span></div>
            </div>
        </div>

    </div>
    <div v-if="show === 2">
        <div class="container">
            <navbar></navbar>
            <div class="main_container">
                <div class="bigLogon">
                    <img src="@/assets/person/biglogo.png" alt="">
                </div>
                <van-cell-group inset>
                    <van-field class="input_log" v-model="phone" placeholder="请输入手机号" />
                    <van-field class="input_log" v-model="password" placeholder="请输入密码" />
                </van-cell-group>
                <div class="other">
                    <div>遇到问题</div>
                    <div>使用验证码登录</div>
                    <!-- <div>遇到问题</div> -->
                </div>
                <div class="btn_log">
                    <van-button class="btn_login" @click="onSubmit">
                        登录
                    </van-button>
                </div>



            </div>
        </div>
    </div>
    <div v-if="show === 3">
        <div class="container">
            <navbar></navbar>
            <div class="main_container">
                <div class="bigLogon">
                    <img src="@/assets/person/biglogo.png" alt="">
                </div>
                <van-cell-group inset>
                    <van-field class="input_log" v-model="register.phone" placeholder="请输入手机号" />
                    <van-field class="input_log" v-model="register.password" placeholder="请输入密码" />
                    <van-field class="input_log" v-model="register.code" placeholder="请输入验证码">
                        <template #button>
                            <van-button :disabled="second > 0" size="small" type="primary" @click="getCode">{{ second ?
                                `${second}秒之后可重新发送` : '获取验证码' }}</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div class="btn_log">
                    <van-button class="btn_login" @click="onRedirect">
                        注册
                    </van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import navbar from '@/components/navbar/index.vue'
import { useUserInfoStore } from '@/stores/module/user'
import { reqLogin, reqPassport, reqregister } from '@/api/user/user';
import { showSuccessToast, showFailToast } from 'vant'; const userInfoStore = useUserInfoStore()
const router = useRouter()
const route = useRoute()
const show = ref(1)
const redirect = ref('')
const phone = ref('16666600000')
const password = ref('111111')
const second = ref(0)
const timer = ref(0)
const register = ref({
    phone: '',
    password: '',
    code: ''
})
//跳转登录页 
const toLogin = () => {
    show.value = 2
}
watch(route, () => {
    redirect.value = route.query && route.query.redirect as string
    console.log(redirect.value);

}, { immediate: true })
// 登录
const onSubmit = async () => {
    console.log(123);


    try {
        await userInfoStore.login(phone.value, password.value)
        showSuccessToast('成功登录');
        router.push({ path: redirect.value || '/' })

    } catch (error) {
        console.log(error);

    }



}
// 获取验证码
const getCode = async () => {
    const { phone, password, code } = register.value

    if (phone) {
        second.value = 10;
        // 创建倒计时定时器
        timer.value = setInterval(() => {
            second.value--
            if (second.value == 0) {
                clearInterval(timer.value)
            }
        }, 1000)
        try {
            let result = await reqPassport(register.value.phone)
            if (result.code === 200) {
                register.value.code = result.data
            }
        } catch (error) {
            console.log(error);
        }
    } else {
        showFailToast('请输入手机号');
    }

}
// 跳转注册页
const toRegister = () => {
    show.value = 3
}
// 注册
const onRedirect = async () => {
    const { phone, password, code } = register.value
    if (phone && password && code) {
        try {
            let result = await reqregister(register.value)
            if (result.code === 200) {
                showSuccessToast('成功注册,即将跳转')
                show.value = 2
                router.replace('/login')
                return
            }
            showFailToast('未知错误')
        } catch (error) {


        }
    } else {
        showFailToast('输入完整表单');
    }
}
// 登录

// const toRegister = () => {
//     // console.log(...route.query);
//     const query = route.query.redirect
//     router.push(`/register?redirect=${query}`)
// }

// 定义功能函数
</script>

<style scoped lang="less">
.container {
    // background-color: #f2f5f4;
    height: 100%;
}



.main_container {
    padding: 80px 0 0;
    width: 100%;

    .btn_log {

        text-align: center;
        width: 100%;
    }

    .other {
        margin: 5px auto;
        width: 90%;
        justify-content: space-between;
        font-size: 14px;
        display: flex;
    }

    .btn_login {

        margin: 10px auto;
        width: 90%;
        // margin-top: 20px;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        background-color: #dd1a21;
    }

    .bigLogon {
        width: 135px;
        height: 45px;
        margin: 0 auto;

        img {
            width: 135px;
            height: 45px;
        }
    }

    .main_input {
        input {
            background-color: #f2f5f4;
            border: none;
        }
    }

    .btn {
        padding: 50px 0 0;
        text-align: center;
        width: 100%;

        .btn_phone {
            width: 80%;
            background: #dd1a21;
            color: #fff;
            margin-bottom: 10px;

            .icon-shouji {
                font-size: 20px;

            }
        }

        .email_phone {
            box-sizing: border-box;
            width: 80%;
            color: #dd1a5e;
            border: 1px solid #dd1a5e;

            .icon-youxiang {
                font-size: 20px;
                vertical-align: center;


            }
        }
    }
}

.thirdWrap {

    display: flex;
    position: absolute;
    width: 80%;
    // align-items: center;
    justify-content: center;
    margin: 0 auto;
    left: 0;
    right: 0;

    bottom: 50px;
    // height: 10px;
    text-align: center;

    .itemWrap {
        font-size: 16px;
        height: 20px;
        width: 60px;
        line-height: 20px;
        border-right: 1px solid #979797;
    }

    .itemWrap:last-child {
        border-right: none
    }
}
</style>